<template>
  <base-layout
    :dialog-title="dialogTitle"
    :dialog-visible="dialogVisible"
    @dialog-close="dialogClose"
    :dialogWidth="dialogWidth"
  >
    <template #searchPanel>
      <el-row :gutter="20">
        <search-panel
          @search="search"
          :showAddButton="true"
          @insert="addPackage"
          addTitle="新增套餐"
          :addPer="'carPackage:save'"
          :selectPer="'carPackage:page'"
        >
          <job-shop
            v-model="form.storeId"
            placeholder="所属门店"
          />
          <el-select
            clearable
            style="width: 200px"
            v-model="form.carPackageDistId"
            placeholder="套餐所属类别"
          >
            <el-option
              v-for="item in dict['套餐所属类别']"
              :key="item.index"
              :value="item.value"
              :label="item.text"
            />
          </el-select>
          <el-input
            clearable
            style="width: 200px"
            v-model="form.carPackageName"
            placeholder="套餐名称"
          />
        </search-panel>
      </el-row>
    </template>
    <template #contentPanel>
      <data-table
        :value="tableData"
        :has-action="true"
        :total-count="totalCount"
        :table-column-attributes="tableColumnAttributes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @row-dblclick="rowDblclick"
        :width="140"
        :isShowPage="true"
      >
        <template #action="{ row }">
          <i
            class="el-icon-edit"
            title="修改"
            style="margin-left: 20px; cursor: pointer"
            v-permission="'carPackage:update'"
            @click="interestsInfo(row)"
          ></i>
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"
            v-permission="'carPackage:del'"
            @click="handleDataDelete(row)"
          ></i>
        </template>
      </data-table>
      <!--工具条-->
    </template>

    <template #dialog>
      <dialog-data-view :value="dialogData" />
    </template>
  </base-layout>
</template>

<script>
import {
  carPackageList,
  addCarPackage,
  deleteCarPackage,
  getCarPackageById,
  changeCarPackageStatus,
} from '@/api/after-sale/client/package'
import baseMixin from '@/mixins/base'
import { getImageUrl, parseTimeToYMDHMS, getDict } from '@/utils'
import DialogDataView from './view/index'
import { JobShop } from '@/components/index'
import { from } from 'rxjs'

export default {
  components: {
    JobShop,
    DialogDataView,
  },
  mixins: [
    baseMixin({
      findData: carPackageList,
      deleteData: deleteCarPackage,
      addData: addCarPackage,
      findDataById: getCarPackageById,
      exportData: '',
      dataName: ['content', 'totalRecords'],
      isAdd: false,
      idName: 'id',
      format (res) {
        return res.map((data) => {
          data.createTime = parseTimeToYMDHMS(data.createTime)
          data.carPackageImage = getImageUrl(data.carPackageImage)
          data.statusName = data.status ? '启用' : '关闭'
          return data
        })
      },
    }),
  ],
  data () {
    return {
      dict: {},
      dialogVisible: false,
      communitys: [],
      dialogWidth: '1000px',
      service: {},
      isAdd: false,
      tableColumnAttributes: [
        { name: '所属门店', value: 'storeName', type: 'text' },
        { name: '套餐名称', value: 'carPackageName', type: 'text' },
        { name: '套餐图片', value: 'carPackageImage', type: 'img' },
        { name: '套餐所属类别', value: 'type', type: 'text' },
        { name: '套餐金额', value: 'carPackageAmount', type: 'text' },
        { name: '套餐工时', value: 'carPackageSumHours', type: 'text' },
        { name: '套餐包含项目', value: 'carProjectNames', type: 'text' },
        { name: '套餐包含配件', value: 'carPartsNames', type: 'text' },
        {
          name: '状态',
          value: 'statusName',
          type: 'switch',
          valueId: 'status',
          action: (row) => {
            changeCarPackageStatus(row.id).then((res) => {
              this.search()
            })
          },
        },
        { name: '备注', value: 'remark', type: 'text' },
        { name: '录入时间', value: 'createTime', type: 'text' },
        { name: '录入人', value: 'userName', type: 'text' },
      ],
      form: {
        carPackageName: '',
        carPackageDistId: '',
        storeId: '',
      },
    }
  },
  async created () {
    this.dict = getDict(['套餐所属类别'])
  },
  methods: {
    rowDblclick (row) {
      this.handleDataChange(row)
    },
    //编辑
    interestsInfo (row) {
      this.$router.push({
        path: '/client-manage/create-package',
        query: { id: row.id },
      })
    },
    search (form) {
      this.searchOptions = {...this.form}
      this.currentPage = 1
      this.setTableData()
    },
    addPackage () {
      // var id = row ? row.id : ''
      // this.$store.state.carInfoId = id
      // this.$store.state.carInfotype = 0
      this.$router.push({ path: '/client-manage/create-package' })
    },
  },
}
</script>

<style lang="scss" scoped>
.vLine {
  border-left: solid 3px black;
  height: 16px;
  vertical-align: bottom;
  display: inline-block;
}
</style>
